import "@/plugins/z-dragxml/components/ZDragLoop/index.scss"
import {createZDragLoopDef, createZDragLoopTemplate} from "@/plugins/z-dragxml/components/ZDragLoop";
import {createZDragStyle, css, removeZDragStyle} from "@/plugins/z-dragxml/factory";
import {nextTick} from "vue";

import ZDragSTabItem from "./ZDragSTabItem";
CustomVueComponent.registerOnce(ZDragSTabItem)

let def = createZDragLoopDef(
  {
    entiels: [
      // ['对象', 'obj'],
      ['数组对象', 'arrayObj'],
      ['GRID', 'grid'],
      // ['GRID-ITEM', 'gridItem'],
    ],
    resolveData(data) {
      data.INIT_CONFIG= {
        ui: {
          defType: 'grid'
        }
      }
      data.ui.defType = 'grid'
      data.styleEle = null
      // console.log('ZDragTab', data)
      return data
    },
    disabledDrag: true
  },
)
def.name = "ZDragTab"
def.template = createZDragLoopTemplate({
  cls: 'z-dragxml-com-auto z-drag-loop--c-header z-drag-loop--grid',
  // actionXml: `<el-button size="small" @click="appendColumn">添加</el-button>`,
  actionXml: '',
  conXml: `:class="zdragLayoutCls()" :style="zdragLayoutStyle()"`
})
def.DRAG_PANEL_CLS =  'panel__z-drag-loop panel__z-drag-grids panel__z-drag-gridlayout'
def.DRAG_GROUP =  'high'
def.provide = function () {
  return {
    ZDragLoopIns: {
      level: this.level
    },
    ZDragLoopSTabIns: {
      level: this.level,
      customCls: this.customCls
    },
  }
}
def.watch = {
  cus_config() {
    // console.log('cus_config change')
    this.private_updateStyle()
  }
}
def.methods.zdragLayoutCls = function () {
  // console.log(this.zdrag__cus_config)
  let control = ZY.lodash.get(this.zdrag__cus_config, 'ui.widgetConfig.control')
  if (control) {
    try {
      let obj = ZY.JSON5.parse(control)
      // console.log(obj)
      let ret = {
        ['z-dragxml-loop__row']: obj.flow === 'row',
        ['z-dragxml-loop__flex-wrap_' + (obj.flexWrap ?? '')]: 1
      }
      // if (obj.flow === 'row') {
      //   ret.display = 'flex'
      // }
      return ret
    } catch (e) {
      return {}
    }
  }
  return {
  }
}
def.methods.zdragLayoutStyle = function () {
  // console.log(this.zdrag__cus_config)
  let control = ZY.lodash.get(this.zdrag__cus_config, 'ui.widgetConfig.control')
  if (control) {
    try {
      let obj = ZY.JSON5.parse(control)
      // console.log(obj)
      let ret = {

        ['overflow-x']: 'auto',
        // ['flex-shrink']: 0,
        // 'flex-grow': 0,
      }
      let widthArr = [];
      let len = obj.layouts.length;


      if (Array.isArray(obj.layouts)) {
        obj.layouts.forEach((layout, index) => {
          let layoutValue = layout.value
          // widthArr[index] = (layoutValue / 24) * 100 + '%'
          // widthArr[index] = (layoutValue / 24) * 100 + '%'
          widthArr[index] = layoutValue
          // widthArr[index] = `(100% - (${len} - 1) * ${gutter})) * (${layoutValue} / 24)`
        })
      }

      // console.log(this.customCls)

      ret['--z-grid-item-column-border'] = '1px'
      ret['--z-grid-item-column-len'] = len
      ret['--z-grid-item-column-gutter-len'] = len - 1
      ret[`--z-grid-item-column-gutter`] = ( obj.columnGap ?? 0) + 'px';
      ret[`--z-grid-item-row-gutter`] = (obj.rowGap ?? 0) + 'px';

      for (let i = 0;  i < 30; i++) {
        let x = i % len;
        ret[`--z-grid-item-${i + 1}`] = widthArr[x]
      }

      return ret
    } catch (e) {
      return {}
    }
  }
  return {
  }
}
def.methods.appendColumnItem = function () {
  let self =  this;
  let ctx = {
    handleObj(obj) {
      // console.log('ctx', obj)
      // obj.afterAttr = ` defType="gridItem" `
      obj.data.parentCls = self.customCls
      return obj
    }
  }
  this.private_append_widget('ZDragTabItem', ctx)
}
def.methods.private_updateStyle = function () {
  let self = this;
  let control = ZY.lodash.get(this.zdrag__cus_config, 'ui.widgetConfig.control')
  if (control) {
    try {
      let obj = ZY.JSON5.parse(control);
      let len = obj.layouts.length;

      removeZDragStyle(this.styleEle)
      this.styleEle = createZDragStyle(`
      .${this.customCls}__item:nth-child(${len}n+1) {
        margin-left: 0;
      }
  `, function (style) {
        style.setAttribute('tab-style', self.customCls)

      })
    } catch (e) {

    }
  }
}
def.methods.onCreated = function () {
  // console.log('onCreated',  this.zdrag__GET_CONFIG('ui', {}))
  let self = this
  if (!this.widgets || this.widgets.length < 1) {
    this.appendColumnItem()
    this.appendColumnItem()
    nextTick(() => {
      setTimeout(() => {
        self.ZDragxmlInstance.reloadTreeMenu()
      }, 50);
    })
  }
  self.private_updateStyle()
  // console.log(this.customCls)
}
def.methods.appendColumn = function () {
  // alert(1)
  this.appendColumnItem()
  nextTick(() => {
    setTimeout(() => {
      self.ZDragxmlInstance.reloadTreeMenu();
    }, 50);
  })
}
let _oldDragUICONFIG = def.DRAG_CONFIG;
def.DRAG_CONFIG = function (current) {
  // console.log('current', current)
  // let instanse = null
  // if (current?.uuid) {
  //   instanse = DRAG_INSTANSE.getRegisterCtx(current?.uuid)
  // }

  let ret = _oldDragUICONFIG()
  // console.log(ret)
  ret.control = {
    type: 'string',
    ui: {
      label: ' ',
      form_item: {
        labelWidth: "0px"
      },
      widget: 'CusGridControl',
      widgetConfig: {
        ctxUUID: current?.uuid
      }
    }
  }
  return {
    props: ret
  }
}
def.DRAG_LABEL_XML = function () {
  return `<div class="z-dragxml-row">
<svg t="1647505837311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2216" width="16" height="16"><path d="M932.571429 54.857143H91.428571c-20.228571 0-36.571429 16.342857-36.571428 36.571428v841.142858c0 20.228571 16.342857 36.571429 36.571428 36.571428h841.142858c20.228571 0 36.571429-16.342857 36.571428-36.571428V91.428571c0-20.228571-16.342857-36.571429-36.571428-36.571428z m-795.428572 82.285714h155.428572v749.714286H137.142857V137.142857z m749.714286 749.714286H365.714286V365.714286h521.142857v521.142857zM365.714286 292.571429V137.142857h521.142857v155.428572H365.714286z" p-id="2217"></path></svg>
<div class="z-dragxml-label__name">布局</div>
</div>`
}
export default def
